Quarto 1.4: Revolutionizing Open-source Dashboarding Capabilities

Dashboarding with Quarto

Joshua J. Cook
jcook0312@outlook.com

Educator / Graduate Student / Clinical Researcher / Data Scientist

Kirk Paul Lafler
KirkLafler@cs.com

Consultant / Developer / Programmer / Data Scientist / Educator / Author

April 14, 2024

Dashboards

Definition by Oxford

“A graphical summary of various pieces of important information, typically used to give an overview of a business.”

Use Cases:

  • Businesses
  • Hospitals
  • Schools
  • Research Organizations

Dashboards are subject to frequent data updates with consistent visualizations. This makes them widely used and highly influential analytic tools for decision makers.

Approaches to Dashboarding

Proprietary Options:

  • Tableau©

  • Microsoft Power BI©

  • SAS®

Open-Source Software (OSS) Options:

  • R (Quarto, flexdashboard)

  • Python (Quarto, dash)

  • Shiny (R and Python)

On January 24th, 2024, Posit released Quarto 1.4, which introduced Quarto Dashboards that aim to streamline the creation of interactive dashboards, giving you an effortless way to lay out interactive components, visualizations, tabular data, and annotations. Dashboarding before 1.4 was possible, but with limitations (WUSS-2023-Paper-165.pdf).

This paper is not an comprehensive introduction to dashboards, but will focus on the production of high-quality dashboards using Quarto 1.4, a free and open-source tool.

A Sneak Peak

An open-source, plotly-interactable dashboard with Quarto 1.4.

https://jjc54.github.io/QuartoDashboarding/

Before we proceed…

Requirements for the coding examples in this demo

Required software

R packages

packages <- c("tidyverse", "gt", "quarto")

if (any(!sapply(packages, requireNamespace, quietly = TRUE))) {
  install.packages(packages[!sapply(packages, requireNamespace, quietly = TRUE)])
}

library(tidyverse) # Data wrangling & visualization
library(gt) # Gold-standard table generation
library(quarto) # Open-source publishing system for dashboard generaiton

RStudio®

We utilized RStudio® as the Integrated Development Environment (IDE). A Quarto Project should be setup (.Rproj) with any required subfolders. The Quarto document should be renamed “index.qmd”. Do not use a standard R script.

Before we proceed…

The Data

Publicly available dataset that has been extracted from the Aggregate Analysis of ClinicalTrials.gov (AACT) database (“Clinical Trials Transformation Initiative” n.d.).

  • Represents all the clinical trials registered and completed within the state of Florida of the United States between 23MAR2014-23MAR2024 (10 years).

  • The AACT database updates daily, and thus this dataset, and its dashboard, would need to be continuously updated.

  • This dataset currently includes 73,500 observations of 39 variables, relating to both the protocol designs and the completion of the clinical trials.

  • All conditions and interventions are included for analysis, and the dataset was cleaned and wrangled by the authors prior to dashboarding.

Before we proceed…

The Data

'data.frame':   73500 obs. of  39 variables:
 $ nct_id                                 : Factor w/ 14334 levels "NCT00002495",..: 2835 2835 1608 1608 3090 3090 3090 12902 12902 12902 ...
 $ start_date                             : Date, format: "2013-04-30" "2013-04-30" ...
 $ completion_date                        : Date, format: "2014-09-30" "2014-09-30" ...
 $ study_type                             : Factor w/ 4 levels "Expanded Access",..: 2 2 2 2 2 2 2 2 2 2 ...
 $ acronym                                : chr  NA NA NA NA ...
 $ baseline_population                    : chr  NA NA NA NA ...
 $ brief_title                            : chr  "Impact of SBI, a Medical Food, on Nutritional Status in Patients With HIV-associated Enteropathy" "Impact of SBI, a Medical Food, on Nutritional Status in Patients With HIV-associated Enteropathy" "Extension Study for Patients Who Have Participated in a BMN 701 Study" "Extension Study for Patients Who Have Participated in a BMN 701 Study" ...
 $ official_title                         : chr  "Randomized, Double-blind, Placebo-controlled, Multicenter, Clinical Study Evaluating the Impact of Serum-derive"| __truncated__ "Randomized, Double-blind, Placebo-controlled, Multicenter, Clinical Study Evaluating the Impact of Serum-derive"| __truncated__ "A Long-Term Study for Extended BMN 701 Treatment of Patients With Pompe Disease Who Have Participated in a BMN 701 Study" "A Long-Term Study for Extended BMN 701 Treatment of Patients With Pompe Disease Who Have Participated in a BMN 701 Study" ...
 $ overall_status                         : Factor w/ 11 levels "Active, not recruiting",..: 3 3 9 9 3 3 3 3 3 3 ...
 $ phase                                  : Factor w/ 8 levels "Early Phase 1",..: 2 2 5 5 5 5 5 5 5 5 ...
 $ enrollment                             : int  103 103 21 21 64 64 64 458 458 458 ...
 $ enrollment_type                        : Factor w/ 2 levels "Actual","Anticipated": 1 1 1 1 1 1 1 1 1 1 ...
 $ source                                 : Factor w/ 2739 levels "1800 Contacts, Inc.",..: 868 868 404 404 2209 2209 2209 1930 1930 1930 ...
 $ number_of_arms                         : Factor w/ 26 levels "1","2","3","4",..: 3 3 3 3 2 2 2 5 5 5 ...
 $ why_stopped                            : chr  NA NA "The study was terminated because BioMarin decided to end the overall development program based on competing cor"| __truncated__ "The study was terminated because BioMarin decided to end the overall development program based on competing cor"| __truncated__ ...
 $ has_expanded_access                    : logi  FALSE FALSE FALSE FALSE FALSE FALSE ...
 $ is_fda_regulated_drug                  : logi  FALSE FALSE FALSE FALSE FALSE FALSE ...
 $ is_fda_regulated_device                : logi  FALSE FALSE FALSE FALSE FALSE FALSE ...
 $ site                                   : Factor w/ 13349 levels "\"National Ophthalmic Research Institute Retina Consultants of Southwest Florida\"",..: 11675 NA 12133 11077 9522 10878 7297 5313 5313 9413 ...
 $ city                                   : Factor w/ 349 levels "Altamonte","Altamonte Springs",..: 87 188 97 318 182 182 291 18 18 77 ...
 $ state                                  : Factor w/ 1 level "Florida": 1 1 1 1 1 1 1 1 1 1 ...
 $ zip                                    : Factor w/ 1221 levels "00000","033401",..: 664 600 223 832 420 521 909 752 752 77 ...
 $ country                                : Factor w/ 1 level "United States": 1 1 1 1 1 1 1 1 1 1 ...
 $ number_of_facilities                   : int  10 10 12 12 13 13 13 63 63 63 ...
 $ actual_duration                        : int  9 9 61 61 4 4 4 8 8 8 ...
 $ were_results_reported                  : logi  TRUE TRUE TRUE TRUE FALSE FALSE ...
 $ has_us_facility                        : logi  TRUE TRUE TRUE TRUE TRUE TRUE ...
 $ has_single_facility                    : logi  FALSE FALSE FALSE FALSE FALSE FALSE ...
 $ minimum_age_num                        : int  18 18 13 13 18 18 18 18 18 18 ...
 $ maximum_age_num                        : int  NA NA NA NA 75 75 75 NA NA NA ...
 $ minimum_age_unit                       : Factor w/ 12 levels "Day","Days","Hour",..: 12 12 12 12 12 12 12 12 12 12 ...
 $ maximum_age_unit                       : Factor w/ 7 levels "Days","Hours",..: NA NA NA NA 7 7 7 NA NA NA ...
 $ number_of_primary_outcomes_to_measure  : int  1 1 3 3 1 1 1 1 1 1 ...
 $ number_of_secondary_outcomes_to_measure: int  0 0 9 9 2 2 2 6 6 6 ...
 $ number_of_other_outcomes_to_measure    : int  5 5 0 0 0 0 0 0 0 0 ...
 $ condition_name                         : Factor w/ 8501 levels "2019 Novel Coronavirus Disease",..: 3547 3547 5906 5906 2288 2288 2288 5148 3317 5148 ...
 $ condition_name_lower_case              : Factor w/ 8409 levels "2019 novel coronavirus disease",..: 3509 3509 5839 5839 2262 2262 2262 5097 3281 5097 ...
 $ duration_months                        : num  17 17 60.81 60.81 8.03 ...
 $ duration_years                         : num  1.419 1.419 5.068 5.068 0.666 ...

Components

Components

Ordered and Unordered Lists

Here we have an unordered list.

  • first item
    • sub-item
  • second item

And next we have an ordered one.

  1. first item
    1. sub-item
  2. second item

Components

Alerts & Cross-refs

To emphasize specific words or text, you can:

  • Use the default .alert class, e.g. important note.
  • Use the .fg class for custom colour, e.g. important note.
  • Use the .bg class for custom background, e.g. important note.

To cross-reference, you have several options, for example:

  • Beamer-like .button class provided by this theme, e.g. Appendix
  • Quarto’s native cross-ref syntax, e.g., “See Section 5.3.”

Components

Citations

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

Components

Blocks

Quarto provides dedicated environments for theorems, lemmas, and so forth.

But in presentation format, it’s arguably more effective just to use a Callout Block.

Regression Specification

The main specification is as follows:

\[ y_{it} = X_{it} \beta + \mu_i + \varepsilon_{it} \]

Components

Multicolumn I: Text only

Column 1

Here is a long sentence that will wrap onto the next line as it hits the column width, and continue this way until it stops.

Column 2

Some other text in another column.

A second paragraph.

Multicolumn support is very flexible and we can continue with a single full span column in the same slide.

Components

Multicolumn II: Text and figures

  • A point about the figure that is potentially important.
  • Another point about the figure that is also potentially important.

Note that sub- and multi-panel figures are also natively supported by Quarto. See here.

Components

Multicolumn III: Code and output

palette("Classic Tableau")

par(
  family = "HersheySans",
  las = 1, pch = 19, cex = 1.5
)

pairs(
  iris[,1:4],
  col=iris$Species
)
Figure 1: Pairwise scatterplot

Tables

Markdown tables

Default table styling

The clean theme rolls its own minimalist aesthetic for tables. This should interface directly with Quarto’s excellent table support.

| fruit  | price  |
|--------|-------:|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {tbl-colwidths="[75,25]"}
Fruit prices
fruit price
apple 2.05
pear 1.37
orange 3.09

Regression tables

Regression example

These aesthetics should carry over to any computation-based tables too.

Let’s take a few slides to illustrate via a simple regression example:

library(fixest)

mods = feols(
  rating ~ complaints + privileges + learning + csw0(raises + critical),
  data = attitude
)

dict = c("rating"     = "Overall Rating",
         "complaints" = "Handling of Complaints",
         "privileges" = "No Special Priviledges",
         "learning"   = "Opportunity to Learn",
         "raises"     = "Performance-Based Raises",
         "critical"   = "Too Critical")

Regression tables

modelsummary

Popular regression table software should play nicely with this theme out of the box. Here’s an example using modelsummary (with the default tinytable backend1). See the next slide for the resulting table.

library(modelsummary) # Make sure you have >=v2.0.0

modelsummary(
  setNames(mods, c("(1)", "(2)")),
  coef_map = dict, stars = TRUE,
  gof_map = NA
  ) |>
  # some optional stylistic tweaks
  tinytable::group_tt(j = list("Dep. variable: Overall Rating" = 2:3)) |>
  tinytable::style_tt(i = 1:2, j = 2:3, background = "pink")

Regression tables

tinytable_kes1b7s0gd2i335qzamr
Dep. variable: Overall Rating
(1) (2)
+ p < 0.1, * p < 0.05, ** p < 0.01, *** p < 0.001
Handling of Complaints 0.682*** 0.692***
(0.129) (0.149)
No Special Priviledges -0.103 -0.104
(0.129) (0.135)
Opportunity to Learn 0.238+ 0.249
(0.139) (0.160)
Performance-Based Raises -0.033
(0.202)
Too Critical 0.015
(0.147)

Regression tables

fixest::etable

Aside: We used the fantastic fixest package to estimate our regression models. fixest bundles its own powerful tabling functions. These were designed for LaTeX output, but can work with this (HTML) theme too.1

  • Set the output: asis R chunk option in your Quarto doc.
  • Set the markdown = TRUE fixest::etable option.
```{{r}}
#| output: asis

setFixest_etable(markdown = TRUE, drop = "Constant")
setFixest_dict(dict)

etable(mods, highlight = .("se" = "complaints"))
```

Regression tables

fixest::etable (cont.)

Figures

Figure

Figure

Full-size Figures

You can use the {.background-image} container environment to completely fill the slide background with an image.

Ideally, your figure will be the same aspect ratio as the screen that you’re presenting on.

  • This can be a bit tricky because of the dynamic nature of reveal.js / HTML. But it’s probably something close to 16:9.
  • Aspect ratio can also matter for a regular full-frame images (previous slide).

Interactive plots

Note: Simple flight data example using threejs. There are many interactive plotting options beyond this. (More details.)

Other

Other

What else can the clean theme do?

We have highlighted some theme-specific components in this demo.

But please note that all of the standard reveal.js functionality and plugins are compatible with the clean theme. This includes:

  • chalkboard for annotating slides.
  • multiplex for enabling audience navigation of your slides.
  • pdf printing in case you don’t have access to a web browser.
  • Etc.

Summary

Summary

A minimalist and elegant presentation theme

The Quarto reveal.js clean theme aims to be a minimalist and elegant presention theme. Here are some options to get you started.

Add the theme to an existing project.

quarto install extension grantmcdermott/quarto-revealjs-clean

… or, create a new project using our lean template.

quarto use template grantmcdermott/quarto-revealjs-clean

… or, create a new project using these demo slides as a full template.

quarto use template grantmcdermott/quarto-revealjs-clean-demo

References

Fajgelbaum, Pablo D, Eduardo Morales, Juan Carlos Suarez Serrato, and Owen Zidar. 2018. “State Taxes and Spatial Misallocation,” 90.
Hsieh, Chang-Tai, and Enrico Moretti. 2019. “Housing Constraints and Spatial Misallocation.” American Economic Journal: Macroeconomics 11 (2): 39.
Moretti, Enrico. 2011. “Local Labor Markets.” In Handbook of Labor Economics. Vol. 4. Elsevier.
Suárez Serrato, Juan Carlos, and Owen Zidar. 2016. “Who Benefits from State Corporate Tax Cuts? A Local Labor Markets Approach with Heterogeneous Firms.” American Economic Review 106 (9).

Appendix

Table 1: Summary of the base R attitude dataset
tinytable_sjpvngjuf2nvt9iargz5
Unique Missing Pct. Mean SD Min Median Max Histogram
rating 22 0 64.6 12.2 40.0 65.5 85.0
complaints 23 0 66.6 13.3 37.0 65.0 90.0
privileges 24 0 53.1 12.2 30.0 51.5 83.0
learning 23 0 56.4 11.7 34.0 56.5 75.0
raises 21 0 64.6 10.4 43.0 63.5 88.0
critical 21 0 74.8 9.9 49.0 77.5 92.0
advance 20 0 42.9 10.3 25.0 41.0 72.0

Back to main